import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Search, Swiper, Grid, List, PullRefresh } from 'react-vant';
import { ListItemRawState, MenuRawState } from '../../types';
import { ListItem } from '../../components';

const Home: React.FC = () => {
  // 获取 hooks
  const navigate = useNavigate()
  // 数据容器
  const [bannersData, setBannersData] = useState<string[]>([])
  const [menusData, setMenusData] = useState<MenuRawState[]>([])
  const [listData, setListData] = useState<ListItemRawState[]>([])
  const [pageCode, setPageCode] = useState(1)
  // 状态容器
  const [finished, setFinish] = useState(false)
  // 获取轮播数据
  const fetchBanners = async () => {
    const resp = await axios.get('/api/banners')
    setBannersData(resp.data.data)
  }
  // 获取导航数据
  const fetchMenus = async () => {
    const resp = await axios.get('/api/menus')
    setMenusData(resp.data.data)
  }
  // 获取列表数据
  const fetchList = async () => {
    const resp = await axios.get('/api/list', { params: { pageCode } });
    const { code, data } = resp.data;
    if (code === 200) {
      setListData(state => state.concat(resp.data.data))
      setPageCode(state => state + 1)
    } else if (code === 400) {
      setFinish(true)
    }
  }
  // 下拉刷新函数
  const onRefresh = () => {
    setPageCode(1)
    setListData([])
    setFinish(false)
  }


  // 源生事件绑定 不建议
  // const handleScroll = () => {
  //   // 滚动条滚动距离
  //   const scrollTop = Math.ceil(document.documentElement.scrollTop)
  //   // 获取视口高度
  //   const clientHeight = document.documentElement.clientHeight
  //   // 获取页面高度x
  //   const height = document.documentElement.offsetHeight

  //   if (scrollTop + clientHeight >= height) {
  //     fetchList()
  //   }

  // }


  // 副作用函数
  useEffect(() => {
    // 发请求
    fetchBanners()
    fetchMenus()
    // // 原生触底
    // document.addEventListener('scroll', handleScroll)
    // return () => {
    //   document.removeEventListener('scroll', handleScroll)
    // }
  }, [])
  return (
    <div>
      <PullRefresh
        onRefresh={onRefresh}
       >
        {/* 头部搜索 */}
        <Search placeholder="请输入搜索关键词" onFocus={() => navigate('/search')} />
        {/* 轮播 */}
        {
          bannersData.length > 0 && <Swiper>
            {
              bannersData.map((v, i) => {
                return <Swiper.Item key={i}>
                  <img src={v} alt="" style={{ width: '100%', height: 200 }} />
                </Swiper.Item>
              })
            }
          </Swiper>
        }

        {/* 导航 */}
        <Grid columnNum={5} border={false}>
          {
            menusData.map((v, i) => {
              return <Grid.Item icon={<img src={v.icon} style={{ borderRadius: '50%' }}></img>} text={v.title} key={i}></Grid.Item>
            })
          }
        </Grid>
        {/* 列表 */}
        <List finished={finished} onLoad={fetchList} loadingText="数据拼命加载中..." finishedText="没有更多数据了">
          <div className="list">
            {
              listData.map((v, i) => {
                return (
                  <ListItem key={i} v={v} onClick={ () => navigate('/detail/' + v.id) } desc={v.desc}></ListItem>
                )
              })
            }
          </div>
        </List>
      </PullRefresh>
    </div>
  )
}


export default Home